body {
           margin: 0;
           font-family: 'Inter', sans-serif;
           background-color: #f0f8ff;
           color: #191717;
       }

       /* Navbar */
       .navbar {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 10px 20px;
           background: linear-gradient(135deg, #307089, #3FA3B9, #A7D8DE);
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
           position: sticky;
           top: 0;
           z-index: 999;
           flex-wrap: wrap;
       }

       .navbar .logo {
           font-size: 1.5rem;
           font-weight: 600;
           color: #fff;
           display: flex;
           align-items: center;
       }

       .navbar .logo img {
           height: 40px;
           margin-right: 10px;
           border-radius: 40%;
       }

       nav {
           display: flex;
           align-items: center;
       }

       .menu {
           list-style: none;
           display: flex;
           gap: 15px;
           margin: 0;
           padding: 0;
       }

       .menu li {
           position: relative;
       }

       .menu li a {
           text-decoration: none;
           color: #fff;
           font-weight: 500;
           padding: 8px 12px;
           display: block;
           transition: background 0.3s, color 0.3s;
       }

       .menu li a:hover {
           background: rgba(255, 255, 255, 0.2);
           border-radius: 5px;
       }

       .submenu {
           position: absolute;
           top: 100%;
           left: 0;
           list-style: none;
           background: #fff;
           padding: 0;
           margin: 0;
           min-width: 200px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
           display: none;
           z-index: 1000;
           border-radius: 5px;
       }

       .submenu li a {
           color: #307089;
           padding: 10px 15px;
       }

       .submenu li a:hover {
           background: #f0f8ff;
       }

       .menu li:hover>.submenu {
           display: block;
       }

       #menu-bars {
           display: none;
           font-size: 1.5rem;
           color: #fff;
           cursor: pointer;
       }

       .user-actions {
           display: flex;
           gap: 10px;
       }

       .user-actions .btn {
           padding: 8px 16px;
           border-radius: 8px;
           text-decoration: none;
           font-weight: 500;
           transition: background 0.3s;
       }

       .subscribe-btn {
           background: #fff;
           color: #307089;
       }

       .subscribe-btn:hover {
           background: #f0f8ff;
       }

       .login-btn {
           background: #307089;
           color: #fff;
           border: 1px solid #fff;
       }

       .login-btn:hover {
           background: #1f4f5e;
       }

       .search-container {
           margin-left: 15px;
           position: relative;
       }

       .search-container input {
           padding: 6px 10px;
           border-radius: 5px;
           border: 1px solid #ccc;
           outline: none;
       }

       #searchResults {
           list-style: none;
           padding: 0;
           margin: 5px 0 0;
           border: 1px solid #ccc;
           border-radius: 5px;
           background: #fff;
           max-height: 200px;
           overflow-y: auto;
           position: absolute;
           width: 100%;
           display: none;
           z-index: 1001;
       }

       #searchResults li a {
           color: #307089;
           text-decoration: none;
           display: block;
           padding: 8px 12px;
       }

       #searchResults li a:hover {
           background-color: #f0f8ff;
       }

       /* Responsive */
       @media screen and (max-width: 900px) {
           #menu-bars {
               display: block;
           }

           .menu {
               display: none;
               flex-direction: column;
               width: 100%;
               background: linear-gradient(135deg, #307089, #3FA3B9, #A7D8DE);
               position: absolute;
               top: 60px;
               left: 0;
               border-radius: 5px;
               overflow: hidden;
           }

           .menu.active {
               display: flex;
           }

           .menu li {
               width: 100%;
           }

           .menu li a {
               padding: 12px 20px;
           }

           .menu li .submenu {
               position: relative;
               top: 0;
               left: 0;
               display: none;
               box-shadow: none;
               background: #f0f8ff;
               border-radius: 0;
           }

           .menu li.active>.submenu {
               display: flex;
               flex-direction: column;
           }

           .search-container,
           .user-actions {
               width: 100%;
               margin: 10px 0;
           }
       }

       /* Book Section */
       .book-section {
           max-width: 900px;
           margin: 30px auto;
           background: white;
           padding: 20px;
           border-radius: 12px;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       }

       .book {
           margin-bottom: 15px;
           padding: 10px;
           border-bottom: 1px solid #ddd;
       }

       .book a {
           color: #0a5d5d;
           text-decoration: none;
           font-weight: bold;
       }

       .book a:hover {
           color: #088;
       }

       /* Footer */
       .social-footer {
           background-color: #f8f8f8;
           padding: 20px 0;
           text-align: center;
       }

       .social-icons a {
           color: #444;
           margin: 0 12px;
           font-size: 22px;
           text-decoration: none;
           transition: color 0.3s ease;
       }

       .social-icons a:hover {
           color: #307089;
       }


       .site-footer {
           background: linear-gradient(135deg, #307089, #3FA3B9, #A7D8DE);
           ;
           padding: 20px 15px;
           text-align: center;
           color: #555;
           font-family: 'Inter', sans-serif;
           border-top: 1px solid #ddd;
           margin-top: 60px;
           box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
       }

       .footer-links {
           margin-bottom: 15px;
       }

       .footer-links a {
           color: #307089;
           margin: 0 12px;
           text-decoration: none;
           font-weight: 600;
           transition: color 0.3s ease;
       }

       .footer-links a:hover,
       .footer-links a:focus {
           color: #0e2b37;
           outline: none;
       }

       .social-icons {
           margin-bottom: 15px;
       }

       .social-icons a {
           color: #444;
           margin: 0 12px;
           font-size: 22px;
           text-decoration: none;
           transition: color 0.3s ease;
       }

       .social-icons a:hover,
       .social-icons a:focus {
           color: #307089;
           outline: none;
       }

       .site-footer p {
           font-size: 0.9rem;
           color: #999;
           margin: 0;
       }

       /* Responsive */
       @media screen and (max-width: 900px) {
           #menu-bars {
               display: block;
           }

           .menu {
               display: none;
               flex-direction: column;
               width: 100%;
               background: linear-gradient(135deg, #307089, #3FA3B9, #A7D8DE);
               position: absolute;
               top: 60px;
               left: 0;
               border-radius: 5px;
               overflow: hidden;
           }

           .menu.active {
               display: flex;
           }

           .menu li .submenu {
               position: relative;
               top: 0;
               left: 0;
               display: none;
               box-shadow: none;
               background: #f0f8ff;
               border-radius: 0;
           }

           .menu li.active>.submenu {
               display: flex;
               flex-direction: column;
           }

           .search-container,
           .user-actions {
               width: 100%;
               margin: 10px 0;
           }
       }